/**
 * Created by Ysssssss on 2021/4/30.
 */

import React, { PureComponent } from 'react'
import ShoppingMallPreviewShareIcon from "@components/shoppingMall/ShoppingMallPreviewShareIcon";
import {Row, Col, Radio, Button} from 'antd'
import {DesignTemplateContext} from "@pages/shoppingMall/ShoppingMallDesignDetailPage";
import notify from "@utils/tip";
import ColorChoosePopover from "@common/presentational/ColorChoosePopover";
import {CustomizeDndProvider, DraggableDiv, DraggableTag} from "@common/presentational/DndSort";
import {moveToNewIndex} from "@utils/arrayHelper";
import TabbarEditInfo from "@components/shoppingMall/design/TabbarEditInfo";
import {HomeOutlined} from "@ant-design/icons";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {withRouter} from "react-router-dom";
import BilinIcon from "@common/presentational/BilinIcon";

@withRouter
class TabbarDesign extends PureComponent {
    static contextType = DesignTemplateContext;

    constructor(props, context) {
        super(props, context);
        this.state = {
            tabbarAdded: false
        }

        const { subNav } = context
        const { platformId } = getHistoryMatchParams(props)
        if (!subNav.includes('tabbar')) {
            props.history.replace(`/shopping-mall/design/${platformId}/detail`)
        }
    }

    toggleAddTabbar (value) {
        this.setState({
            tabbarAdded: value
        })
    }

    onValueChange (key, value) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('tabbar', {
            ...templateInfo.tabbar,
            [key]: value,
        })
    }

    onTargetChange (key, e) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('tabbar', {
            ...templateInfo.tabbar,
            [key]: e.target.value
        })
    }

    sortTabbar = ((dragId, hoverId) => {
        const { onChange, templateInfo } = this.context
        const { list } = templateInfo.tabbar
        let dragIndex = 0
        let hoverIndex = 0
        list.forEach((item, index) => {
            if(item.text === dragId) {
                dragIndex = index
            }
            if(item.text === hoverId) {
                hoverIndex = index
            }
        })
        onChange && onChange('tabbar', {
            ...templateInfo.tabbar,
            list: moveToNewIndex(list, dragIndex, hoverIndex)
        })
    })

    editSubmit (values, index) {
        const { onChange, templateInfo } = this.context
        if (index < 0) {
            onChange && onChange('tabbar', {
                ...templateInfo.tabbar,
                list: [
                    ...templateInfo.tabbar.list,
                    values,
                ]
            })
            this.toggleAddTabbar(false)
        } else {
            onChange && onChange('tabbar', {
                ...templateInfo.tabbar,
                list: [
                    ...templateInfo.tabbar.list.slice(0, index),
                    values,
                    ...templateInfo.tabbar.list.slice(index + 1),
                ]
            })
        }
    }

    deleteSubmit(index) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('tabbar', {
            ...templateInfo.tabbar,
            list: [
                ...templateInfo.tabbar.list.slice(0, index),
                ...templateInfo.tabbar.list.slice(index + 1),
            ]
        })
    }

    render () {
        const { templateInfo } = this.context
        const { tabbar } = templateInfo
        const { list } = tabbar
        const { tabbarAdded } = this.state
        let texts = list.map(item => item.text)
        return (
            <>
                <div className="preview-container">
                    <div className="preview-reality" style={{height: 'calc(100% - 50px)'}}>
                        <ShoppingMallPreviewShareIcon />
                        <div className="tabbar-preview">
                            { list.map((item, index) => (
                                <div className="ft-12 flex-center poi-cur"
                                     key={`tabbar-${index}-preview`}
                                     style={{
                                         width: '50px',
                                         color: index === 0 ? tabbar.activeColor : tabbar.color
                                     }}
                                >
                                    { index === 0 ? (
                                        item.selectedIconPath ?
                                            <img src={item.selectedIconPath} width={24} height={24} alt=""/> :
                                            <BilinIcon type={`tabbar-${item.page}`} className="ft-24"/>
                                    ) : null }
                                    { index !== 0 ? (
                                        item.iconPath ?
                                            <img src={item.iconPath} width={24} height={24} alt=""/> :
                                            <BilinIcon type={`tabbar-${item.page}`} className="ft-24"/>                             ) : null }
                                    { tabbar.isShowText ? (
                                        <div className="txc w-100">{ item.text }</div>
                                    ) : null }
                                </div>
                            )) }
                        </div>
                    </div>
                </div>
                <div className="operation-container ft-clr-d">
                    <div className="ft-16">导航设置</div>
                    <div className="ft-12 ft-clr-ml pdb-16 bdb-l">配置合适的导航，可帮你突出业务重点，方便用户快速找到所需。</div>
                    <Row className="mgt-24">
                        <Col span={6}>导航文字：</Col>
                        <Col span={18}>
                            <Radio.Group onChange={this.onTargetChange.bind(this, 'isShowText')} value={tabbar.isShowText}>
                                <Radio value={true}>显示</Radio>
                                <Radio value={false}>不显示</Radio>
                            </Radio.Group>
                        </Col>
                    </Row>
                    <Row className="mgt-16">
                        <Col span={6} />
                        <Col span={18} className="operation-block-bg pd-16">
                            <Row>
                                <Col span={12}>未选中字色</Col>
                                <Col span={12}>
                                    <ColorChoosePopover value={tabbar.color} onChange={this.onValueChange.bind(this, 'color')}/>
                                </Col>
                            </Row>
                            <Row className="mgt-16">
                                <Col span={12}>选中字色</Col>
                                <Col span={12}>
                                    <ColorChoosePopover value={tabbar.activeColor} onChange={this.onValueChange.bind(this, 'activeColor')}/>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <div className="mgt-36 flex-row-between">
                        <span>导航设置</span>
                        <span className="ft-clr-ml">可拖动排序</span>
                    </div>
                    <CustomizeDndProvider>
                        { list.map((tabbar, index) => (
                            <DraggableDiv
                                key={tabbar.text}
                                id={tabbar.text}
                                type="tabbar"
                                moveItemFunc={this.sortTabbar.bind(this)}
                            >
                                <TabbarEditInfo
                                    tabbarInfo={tabbar}
                                    index={index}
                                    texts={[
                                        ...texts.slice(0,index),
                                        ...texts.slice(index + 1)
                                    ]}
                                    editSubmit={this.editSubmit.bind(this)}
                                    deleteSubmit={this.deleteSubmit.bind(this)}
                                />
                            </DraggableDiv>
                        )) }
                    </CustomizeDndProvider>
                    { tabbarAdded ? (
                        <TabbarEditInfo
                            toggleAddTabbar={this.toggleAddTabbar.bind(this, false)}
                            index={-1}
                            texts={texts}
                            editSubmit={this.editSubmit.bind(this)}
                        />
                    ) : null }
                    <Button className="button-large w-100 mgt-16"
                            onClick={this.toggleAddTabbar.bind(this, true)}
                            disabled={tabbarAdded}
                    >添加导航</Button>
                </div>
            </>
        )
    }
}

export default TabbarDesign